<template>
  <div>
    <div class="container">
        <div class="handle-box" v-if="roleId != 1">
          <el-form ref="form" :model="form" label-width="150px" style="width: 80%" >
            <el-row >
              <el-col :span="10">
                <el-form-item label="本月应提成:" >
                  <span>{{dataMap.byytc.toFixed(2)}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('byytc')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="本月实际提成:" >
                  <span>{{dataMap.bysjtc.toFixed(2)}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('bysjtc')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="上月实际提成:" >
                  <span>{{dataMap.sysjtc.toFixed(2)}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('sysjtc')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="次月预计应提成:" >
                  <span>{{dataMap.cyyjtc.toFixed(2)}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('cyyjtc')">详情</el-button>
            </el-row>
          </el-form>
        </div>

        <div class="handle-box" v-if="roleId == 1">
          <el-form ref="form" :model="form" label-width="150px" style="width: 80%" >
            <el-row >
              <el-col :span="10">
                <el-form-item label="上月实际回款:" >
                  <span>{{dataMap.sysjhk?dataMap.sysjhk.toFixed(2):0.00}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('sysjhk')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="上月毛利润:" >
                  <span>{{dataMap.symlr?dataMap.symlr.toFixed(2):0.00}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('symlr')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="本月应回款:" >
                  <span>{{dataMap.byyhk?dataMap.byyhk.toFixed(2):0.00}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('byyhk')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="本月实际回款:" >
                  <span>{{dataMap.bysjhk?dataMap.bysjhk.toFixed(2):0.00}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('bysjhk')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="本月毛利润:" >
                  <span>{{dataMap.bymlr?dataMap.bymlr.toFixed(2):0.00}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('bymlr')">详情</el-button>
            </el-row>
            <el-row >
              <el-col :span="10">
                <el-form-item label="提成情况:" >
                  <span>{{dataMap.bytcqk?dataMap.bytcqk.toFixed(2):0.00}}</span>
                </el-form-item>
              </el-col>
              <el-button type="primary" style="margin-left: 10%" @click="details('bytcqk')">详情</el-button>
            </el-row>
          </el-form>
        </div>

        <div class="handle-box">
          <el-date-picker v-model="query.adYearMonth" type="month" placeholder="提成月份" class="mr10"  value-format="yyyy-MM" format="yyyy-MM"> </el-date-picker>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>

        <el-table
            :data="tableDataShow"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column type="index" label="ID" width="55" align="center" ></el-table-column>
          <el-table-column prop="name" label="员工姓名"></el-table-column>
          <el-table-column prop="targetMonth" label="目标月份"></el-table-column>
          <el-table-column prop="attendanceMonth" label="回款月份"></el-table-column>
          <el-table-column prop="monthCost" label="当月成本">
            <template slot-scope="scope">{{scope.row.monthCost| towNumber}}</template>
          </el-table-column>
          <el-table-column prop="monthRemittance" label="当月回款金额">
            <template slot-scope="scope">{{scope.row.monthRemittance| towNumber}}</template>
          </el-table-column>
          <el-table-column prop="monthProfit" label="当月利润">
            <template slot-scope="scope">{{scope.row.monthProfit| towNumber}}</template>
          </el-table-column>
          <el-table-column prop="roleStr" label="角色"></el-table-column>
          <el-table-column v-if="query.landerrole == 1" prop="saccount" label="系统员工"></el-table-column>
          <el-table-column prop="commission" label="提成金额"></el-table-column>
        </el-table>
        <div style="float: right;margin-top: 0.5vh;">
          <span>总计：{{ tableDataSumShow?tableDataSumShow.toFixed(2):0.00}}</span>
        </div>
          <el-dialog title="绩效详情" :visible.sync="editVisible" width="50%" :close-on-click-modal="false" v-if="roleId != 1">
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="name" label="员工姓名"></el-table-column>
              <el-table-column prop="targetMonth" label="目标月份"></el-table-column>
              <el-table-column prop="attendanceMonth" label="回款月份"></el-table-column>
              <el-table-column prop="monthCost" label="当月成本">
                <template slot-scope="scope">{{scope.row.monthCost| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="monthRemittance" label="当月回款金额">
                <template slot-scope="scope">{{scope.row.monthRemittance| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="monthProfit" label="当月利润">
                <template slot-scope="scope">{{scope.row.monthProfit| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="roleStr" label="角色"></el-table-column>
              <el-table-column prop="commission" label="提成金额"></el-table-column>
            </el-table>
            <div style="float: right;margin-top: 0.5vh;">
              <span>总计：{{ tableDataSum?tableDataSum.toFixed(2):0.00}}</span>
            </div>
          </el-dialog>
          <el-dialog title="绩效详情" :visible.sync="editVisible" width="50%" :close-on-click-modal="false" v-if="roleId == 1">
            <el-table
                :data="admintableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
              <el-table-column prop="staff1.name" label="员工姓名"></el-table-column>
              <el-table-column prop="staff1.worksite" label="工作现场"></el-table-column>
              <el-table-column prop="staff1.partner" label="合作商"></el-table-column>
              <el-table-column prop="adYearMonth" label="目标月份"></el-table-column>
              <el-table-column prop="attendanceMonth" label="回款月份"></el-table-column>
              <el-table-column prop="adSalary" label="当月薪资">
                <template slot-scope="scope">{{scope.row.adSalary| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="adReceival" label="上月实际回款金额" v-if="admintype == 'sysjhk'|| admintype == 'symlr'">
                <template slot-scope="scope">{{scope.row.adReceival| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="adReceival" label="本月实际回款金额" v-if="admintype == 'bysjhk'">
                <template slot-scope="scope">{{scope.row.adReceival| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="adDuerec" label="本月应回款金额" v-if="admintype == 'byyhk' || admintype == 'bymlr'">
                <template slot-scope="scope">{{scope.row.adDuerec| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="ymlr" label="本月应毛利润" v-if="admintype == 'byyhk' || admintype == 'bymlr'">
                <template slot-scope="scope">{{scope.row.ymlr| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="smlr" label="本月实际毛利润" v-if="admintype == 'bysjhk'">
                <template slot-scope="scope">{{scope.row.smlr| towNumber}}</template>
              </el-table-column>
              <el-table-column prop="smlr" label="上月利润" v-if="admintype == 'symlr' || admintype == 'sysjhk'">
                <template slot-scope="scope">{{scope.row.smlr| towNumber}}</template>
              </el-table-column>
            </el-table>
            <div style="float: right;margin-top: 0.5vh;">
              <span>总计：{{ adminsum?adminsum.toFixed(2):0.00}}</span>
            </div>
          </el-dialog>
        </div>
    </div>
</template>

<script>
    import { selectDate,selectDetails} from '../../api/performance';
    import { _dateFormat} from '../../utils/tool';
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default {
        name: 'basetable',
        components: { ElImageViewer },
        data() {
            return {
                query: {
                    adUserId:localStorage.getItem('ms_userid'),
                    landerrole:localStorage.getItem('ms_userrole'),
                    status:'',
                    pageIndex: 1,
                    pageSize: 10
                },
                roleId:localStorage.getItem("ms_userrole"),
                previewFlg:false,
                previewSrc: '',
                tableData: [],
                admintableData: [],
                tableDataSum: 0,
                tableDataShow: [],
                tableDataSumShow: 0,
                multipleSelection: [],
                groupList:[],
                editVisible: false,
                pageTotal: 0,
                admintype:"",
                adminsum:"",
                form: {
                },
                dataMap:{
                },
                idx: -1,
                id: -1,
            };
        },
        created() {
          this.getData();
        },
        filters:{
            //格式化后台传过来的时间戳
            dateFormat(time) {
                let date = new Date(time);
                return _dateFormat(date,'yyyy-MM-dd')
            },
            towNumber(val) {
              if(!val){
                return 0.00
              }
              return val.toFixed(2)
            }
        },
        methods: {
            getData(){
              var that = this;
              this.query.roleId = this.roleId;
              selectDate(this.query).then(res => {
                that.dataMap = res
              });
            },
            getDataByMonth(){
              var that = this;
              this.query.tcType ="sysjtc";
              selectDetails(this.query).then(res => {
                that.tableDataShow = res.item;
                that.tableDataSumShow = res.sum;
              });
            },
                // 触发搜索按钮
            handleSearch() {
                this.$set(this.query, 'pageIndex', 1);
                this.getDataByMonth();
            },
            butCancel(){
                this.editVisible = false;
                Object.keys(this.form).forEach(key => (this.form[key] = ''));
            },
            // 分页导航
            handlePageChange(val) {
              this.$set(this.query, 'pageIndex', val);
              this.getDataByMonth();
            },
            // 详情
            details(r){
              var that = this;
              this.editVisible = true;
              this.query.tcType =r;
              var parame =  this.query
              delete parame.adYearMonth;
              selectDetails(parame).then(res => {
                that.tableData = res.item;
                that.tableDataSum = res.sum;
                that.admintableData = res.item;
                that.adminsum = res[r + 'sum'];
                that.admintype = r;
              });
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .mr10 {
        margin-right: 10px;
    }
</style>